<template>
  <div>
    <div
      class="item"
      :dataSource="dataSource"
      v-for="(item, index) in dataSource"
      :key="index"
    >
      <div class="pic">
        <img :src="item.event_imgurl" alt="" />
      </div>
      <div class="abstruct">
        <div class="icon">
          <FireTwoTone
            :style="{ fontSize: '35px' }"
            two-tone-color="rgb(255, 42, 0)"
          />
          <RadarChartOutlined />
        </div>
        <div class="box">
          <p class="addr-type">
            {{ item.event_addr }}发生{{ item.event_type }}事件
          </p>
          <p class="level">事件级别: {{ item.event_level }}</p>
        </div>
      </div>
      <div class="content">
        <div class="descri">
          <div class="d-descri">
            {{ item.event_descri }}
          </div>
          <div class="time">
            <van-icon name="aim" size="20" />
            {{ item.event_time }}
          </div>
        </div>
      </div>
    </div>
    <a-pagination
      class="pag"
      v-model:current="current"
      v-model:page-size="pageSize"
      :defaultCurrent="1"
      :defaultPageSize="3"
      :page-size-options="pageSizeOptions"
      :total="total"
      show-size-changer
      @change="onChange"
      @showSizeChange="onShowSizeChange"
      :show-total="(total) => `共 ${total} 条`"
    />
  </div>
</template>

<script setup>
import {
  UserOutlined,
  DashboardTwoTone,
  exceptionOutlined,
} from '@ant-design/icons-vue'
import { FireTwoTone } from '@ant-design/icons-vue'
import axios from 'axios'
import { onMounted, ref } from 'vue'
const current = ref(1)
const pageSize = ref(2)
const pageSizeRef = ref(2)
const pageSizeOptions = ref(['2', '4', '6'])
const total = ref(0)
const dataSource = ref([])
onMounted(() => {
  ///events/font
  showTable(1, 2)
})
const showTable = (page, size) => {
  axios
    .get('http://localhost:3000/events/font', {
      params: {
        page, //当前页
        size, //一页几条
      },
    })
    .then((res) => {
      console.log(res)
      const events = res.data.result
      total.value = res.data.total
      dataSource.value = events
    })
}
const onShowSizeChange = (current, pageSize) => {
  console.log(current, pageSize)
  pageSizeRef.value = pageSize
}
const onChange = (pageNumber, pageSize) => {
  //显示现在是第几页,一页几条
  console.log(pageNumber, pageSize)
  showTable(pageNumber, pageSize)
}
</script>

<style scoped>
.item {
  padding: 17px;
  width: 390px;
  height: 435px;
  border-bottom: 1px solid rgba(153, 153, 153, 0.2);
}
.pic {
  width: 280px;
  height: 170px;
  line-height: 170px;
  /* background: #eaedf2; */
  text-align: center;
  font-size: 0;
  margin: 0 auto;
}
img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  vertical-align: middle;
}
.abstruct {
  height: 100px;
  width: 360px;
  padding: 20px 5px;
  display: flex;
  font-size: 18px;
}
.icon {
  margin-right: 15px;
}

.addr-type {
  overflow: hidden;
}
.level {
  color: #576a92;
  transform: translateY(-10px);
}
.content {
  height: auto;
  width: 360px;
  padding: 5px;
  background: #abbbde7e;
  border-radius: 10px;
}
.d-descri {
  overflow: hidden;
  height: 100px;
  width: 355px;
  line-height: 25px;
  text-indent: 2em;
  font-size: 16px;
}
.time {
  text-align: right;
  color: #999;
}
.pag {
  width: 70%;
  margin: 0 auto;
}
</style>
